<template>
  <div class="member-order-page">
   <div class="xtx-tabs">
    <nav>
        <a @click="activeName='all'" :class="{active:activeName==='all'}" href="javascript:;" name="all" label="全部订单">全部订单</a>
        <a @click="activeName='unpay'" :class="{active:activeName==='unpay'}" href="javascript:;" name="unpay" label="待付款">待付款</a>
        <a @click="activeName='deliver'" :class="{active:activeName==='deliver'}" href="javascript:;" name="deliver" label="待发货">待发货</a>
        <a @click="activeName='receive'" :class="{active:activeName==='receive'}" href="javascript:;" name="receive" label="待收货">待收货</a>
        <a @click="activeName='comment'" :class="{active:activeName==='comment'}" href="javascript:;" name="comment" label="待评价">待评价</a>
        <a @click="activeName='complete'" :class="{active:activeName==='complete'}" href="javascript:;" name="complete" label="已完成">已完成</a>
        <a @click="activeName='cancel'" :class="{active:activeName==='cancel'}" href="javascript:;" name="cancel" label="已取消">已取消</a>
    </nav>
  </div>
  <div class="member-body">
    <OrderItem v-for="item in orderList" :key="item.id" :order="item"/>
  </div>
  </div>
</template>
<script>
import OrderItem from './components/OrderItem.vue'
import { reactive, ref } from 'vue'
import { findOrderList } from '@/api/order'
export default {
  name: 'MemberOrder',
  components:{OrderItem},
  setup () {
    const activeName = ref('all')
       // 查询订单参数
    const requestParams = reactive({
      page: 1,
      pageSize: 5,
      orderState: 0
    })
    // 订单列表
    const orderList = ref([])
	// 查询订单
    findOrderList(requestParams).then(data => {
        console.log('data.result',data.result);
        orderList.value = data.result.items
    })
    return { activeName,orderList }
  }
}
</script>
<style scoped lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}</style>